<template>
	<div>
		<el-form>
			<div class="container">
				<h3>原料信息</h3>
				<el-table
				    :data="ruleForm.materialList"
				    border
				    style="margin-top:20px;"
				    ref="multipleTable"
				    header-cell-class-name="table-header"
				>
				    <el-table-column prop="breedName" sortable label="品名"></el-table-column>
				    <el-table-column prop="batch" sortable label="批号"></el-table-column>
				    <el-table-column prop="type" sortable label="来源"></el-table-column>
				    <el-table-column prop="place" sortable label="地块/供应商"></el-table-column>
				    <el-table-column sortable label="数量">
				        <template slot-scope="scope">{{scope.row.number}}{{scope.row.units}}</template>
				    </el-table-column>

				</el-table>
			</div>
			<div class="container" style="margin-top:20px;">
				<h3>加工信息</h3>
				<el-form-item label="加工工艺" style="margin-top:20px;">
					{{ruleForm.detailList[0].technology}}
				</el-form-item>
				<div class="addtend" v-for="(s,index) in ruleForm.technologyList" :key="index"  style="margin:30px;padding:10px;font-size:8px;position:relative;">
				    <div style="width:20px; margin:0 auto;line-height:24px;font-size:12px;position: absolute;right:0px;top:0px;background:#3aa0ff;text-align: center;color:white;">{{s.methodName}}</div>
				    <el-form-item label="加工时间">
					    {{s.beginTime}}至{{s.endTime}}
				    </el-form-item>
				    <el-form-item label="负责人">
						{{s.userName}}
						<el-button v-if="s.equipmentName" type="danger" round size="mini"  style="float: right;margin-right:20px;">查看监控</el-button>

				    </el-form-item>
				    <img :src="$store.state.plantImg + s.processImg" alt="" style="width:300px;height:130px;">
				</div>
			</div>
			<div class="container" style="margin-top:20px;">
				<h3>成品信息</h3>
				<el-table
				    :data="ruleForm.detailList"
				    border
				    style="margin-top:20px;"
				    ref="multipleTable"
				    header-cell-class-name="table-header"
				>
				    <el-table-column prop="productName" sortable label="品名"></el-table-column>
				    <el-table-column prop="batch" sortable label="批号"></el-table-column>
				    <el-table-column prop="grade" sortable label="品级"></el-table-column>
				    <!-- <el-table-column prop="place" sortable label="地块/供应商"></el-table-column> -->
				    <el-table-column sortable label="成品数量">
				        <template slot-scope="scope">{{scope.row.surplusNumber}}{{scope.row.units}}</template>
				    </el-table-column>
					<el-table-column sortable label="关联介绍">
						 <template slot-scope="scope">
							 <span v-if="scope.row.productId != '' && scope.row.productId != null">已关联</span>
							 <el-button type="text" v-else @click="open(scope.$index,scope.$row)">关联</el-button>
						 </template>
					</el-table-column>
				</el-table>
			</div>



      <el-dialog title="选择产品介绍" :visible.sync="dialogTableVisible1">
        <el-table
            :data="tableData1"
            border
            style="margin-top:20px;"
            ref="multipleTable"
            header-cell-class-name="table-header"
        >
          <el-table-column prop="img" sortable label="产品图">
            <template slot-scope="scope">
              <img :src="$store.state.imageUrls + scope.row.img" alt="" style="width:50px; height:50px;" v-if="scope.row.img != '' || scope.row.img!= null ">
            </template>
          </el-table-column>
          <el-table-column prop="title" sortable label="产品标题"></el-table-column>
          <!-- <el-table-column prop="createTime" sortable label="添加时间"></el-table-column> -->
          <el-table-column prop="relatedProducts" sortable label="关联产品"></el-table-column>
          <el-table-column prop="quality" sortable label="保质期"></el-table-column>
          <el-table-column label="操作" width="150" align="center">
            <template slot-scope="scope">
              <el-button
                  type="text"
                  @click="handleSelectProductDetails(scope.$index, scope.row)"
              >选择</el-button>

            </template>
          </el-table-column>
        </el-table>
        <el-pagination layout="total, prev, pager, next, jumper" :page-size="pagesize" :current-page.sync="currentPage1"  @current-change="handleCurrentChange1" :total="total1" style="margin-top:20px"></el-pagination>

      </el-dialog>
      <el-form>
			    <el-form-item class="footerFixed">

			        <el-button @click="backPage">返回</el-button>
			    </el-form-item>
			</el-form>
		</el-form>
	</div>
</template>

<script>
	import { process_findById,products_findByList,process_bind } from "@/request/api.js"
	export default {
		data(){
			return{
				id:'',
				ruleForm:{},
        tableData1:{},
        total1:0,
        currentPage1:1,
        pagesize:10,
        dialogTableVisible1:false,
        index:''
			}
		},
		mounted(){
			this.id = this.$route.query.id
			this.init()
      this.getTableList()
		},
		methods:{
      handleSelectProductDetails(index,row){
        var str = this.ruleForm.detailList[this.index].id + "/" + row.id
        process_bind(str).then((res)=>{
          this.init()
          this.dialogTableVisible1 = false
        })
      },
      open(index,row){
        this.index = index
        this.dialogTableVisible1 = true
      },
      getTableList(){
        let data = {
          page:this.currentPage1,
          query:this.searchName1
        }
        products_findByList(data).then((res)=>{
          this.tableData1 = res.rows
          this.total1 = res.total
        })
      },
        handleCurrentChange1(val){
          this.currentPage1 = val
          this.getTableList()
        },

			backPage(){
				this.$router.go(-1)
			},
			init(){
				process_findById(this.id).then((res)=>{
					this.ruleForm = res.data
				})
			}

		}
	}
</script>

<style scoped="scoped">
	.addtend{
	    display:inline-block;
	    width: 300px;
	    margin-left:20px;
	    /* margin:20px; */
	    height:250px;
		border: 1px solid #999;

	    /* line-height:200px;
	    text-align: center; */
	    background:#fff;
	}
</style>
